<template>
	<h2>素材审核</h2>
	<!-- 一次显示两个 -->
	<div class="showbox">
		<div v-for='el in data' class="show">
			<el-button @click='deleteimg(el.pid)' type="danger" size="small">删除</el-button><br>
			<span :title='el.ptext'>{{el.ptext}}</span>
			<img :src="'http://localhost:7001/public'+el.img" alt="">
		</div>
		<el-button class="btn" @click='load' type="primary">加载</el-button>
	</div>
	
</template>

<script setup>
	import {getCurrentInstance,ref,reactive,onMounted} from 'vue'
	let {proxy}=getCurrentInstance()
	let data = reactive([])
	let length = ref(0)
	let deleteimg = async (pid)=>{
		let res = await proxy.$axios.get('/egg/deleteimg',{
			params:{
				pid
			}
		})
		console.log(res.data)
		alert(res.data.data)
	}
	let load = async ()=>{
		let res = await proxy.$axios.get('/egg/shenhe',{
			params:{
				start:length.value
			}
		})
		console.log(res.data)
		data.splice(0,data.length,...res.data.data)
		length.value +=4 
		// data.splice(0,0,...res.data.data)
	}
	onMounted(async()=>{
		let res = await proxy.$axios.get('/egg/shenhe',{
			params:{
				start:data.length
			}
		})
		console.log(res.data)
		data.splice(0,data.length,...res.data.data)
	})
</script>

<style scoped>
	h2 {
		margin-left: 40px;
	}
	.showbox {
		width: 900px;
		height: 450px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.btn {
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.show {
		width: 200px;
		/* border: 1px solid black; */
	}
	.show span {
		display: inline-block;
		width: 150px;
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出容器大小的内容 */
		text-overflow: ellipsis; 
		padding: 2px 10px 10px 10px;
	}
	.show img {
		width: 150px;
	}
</style>